<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            list-style: none;
        }
        .new{
            opacity: 0;
            animation: show 4s linear;
        }
        @keyframes show {
            from{
                opacity: 0;
            }
            50%{
                opacity: 1;
                color: yellow;
            }
            100%{
                opacity: 0;
            }
        }
        .box{
            width: 400px;
            height: 200px;
            position: absolute;
            left: 0;
            top:0;
            right: 0;
            bottom: 0;
            margin: auto;
            font-size: 70px;
            text-align: center;
            z-index: 100;
        }
        .button{
            width: 100px;
            height: 60px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 30%;
            margin: auto;
            text-align: center;
            font-size: 20px;
            z-index: 100;
            opacity: .5;
        }
        .menu{
            transition: all 1s;
            transform: translateX(-100%);
            position: relative;
            z-index: 101;
        }
        .addfood{
            z-index: 101;
        }
        .add{

        }

    </style>
</head>
<body>
<div class="box">

</div>
<input type="button" class="button" value="开始">
<input type="text" class="addfood"  title="吃吃吃">
<input type="button" class="add" value="添加">
<ul class="menu">

</ul>
</body>
<script>

    let button=document.querySelector(".button");
    let box=document.querySelector(".box");
    let menu=document.querySelector(".menu");
    let add=document.querySelector(".add");

    let newfood=document.querySelector(".addfood");
    let date=["麻辣拌","炸鸡饭","汉堡","鸡排","焖面","重庆小面","大同刀削面","喵喵焗饭","别他妈吃了"];
    let i=0;
    function change() {
            if(i>date.length-1){i=0}
            box.textContent=date[i];
            i++;
    }
    function show() {
            if(i===date.length){i=0}
            let rleft;
            let rtop;
            let big;
            rleft = Math.floor(Math.random() * (window.innerWidth - 100));
            rtop = Math.floor(Math.random() * (window.innerHeight - 100));
            big = Math.floor(Math.random() * 50+12);
            console.log(rleft,rtop);
            let newdiv = document.createElement("div");
            newdiv.style.cssText = `text-align: center;width:100px;height:100px;border-radius:50%;
                 position:absolute;
                 left:${rleft}px;
                 top:${rtop}px;
                 font-size:${big}px`;
            newdiv.innerHTML = `${date[i]}`;
            document.body.appendChild(newdiv);
            newdiv.classList.add("new");

            i++
    }
    let t;
    let y;
    let stop=false;
    button.onclick=function () {
        if(stop) {
            clearInterval(t);
            clearInterval(y);
            button.value="继续";
            menu.style.cssText=`  transform: translateX(-100%)`
        }else{
            t=setInterval(change,50);
            y=setInterval(show,200);
            button.value="暂停";
            menu.style.cssText=`  transform: translateX(-100%)`
        }
        stop=!stop;
    };
    function getdate() {
        if (localStorage.date) {
            return JSON.parse(localStorage.date)
        }
        else {
           localStorage.date = JSON.stringify(date);
            return JSON.parse(localStorage.date)
        }
    }
    function setdate(date) {
        localStorage.date = JSON.stringify(date);
    }
    add.onclick=function () {
        date=getdate();
        let value=newfood.value;
        if(value){
        date.push(value);
        setdate(date);
            newfood.value=""}
        menu.style.cssText=`transform: translateX(0)`;
        render();
    };


   menu.onclick = function (e) {
        let {target} = e;
        if (target.className === "del") {
            const pos=target.parentNode.id
            date.splice(pos, 1)
            setdate(date);
            render();
        }
    }

    function render() {
        date=getdate();
        let str = "";
        let i=0
        date.forEach(function (obj) {
            str += `<li id=${i}>${obj}<span class="del"> X</spanclass></li>`;
            i++;
        });
        menu.innerHTML = str;
    }
</script>
</html>